import { defineComponent } from 'vue';
import GLayout from '/@/shared/components/g-layout/index.vue';

import Bar from './components/Bar.vue';
import BarMulti from './components/BarMulti.vue';
import Line from './components/Line.vue';
import LineMulti from './components/LineMulti.vue';
import Pie from './components/Pie.vue';
import Radar from './components/Radar.vue';
import Gauge from './components/Gauge.vue';
import RankList from './components/RankList.vue';
import Trend from './components/Trend.vue';
import BarAndLine from './components/BarAndLine.vue';

import { getData } from './chartdemo.data';
export default defineComponent({
  name: 'echarts',
  components: {
    GLayout,
    Bar,
    BarMulti,
    Line,
    LineMulti,
    Pie,
    Radar,
    Gauge,
    RankList,
    Trend,
    BarAndLine,
  },
  data() {
    return {
      tabsList: [
        { key: '1', tab: '柱状图', editor: 'Bar' },
        { key: '2', tab: '多列柱状图', editor: 'BarMulti' },
        { key: '3', tab: '迷你柱状图', editor: 'Bar' },
        { key: '4', tab: '面积图', editor: 'Line' },
        { key: '5', tab: '迷你面积图', editor: 'Line' },
        { key: '6', tab: '多行折线图', editor: 'LineMulti' },
        { key: '7', tab: '饼图', editor: 'pie' },
        { key: '8', tab: '雷达图', editor: 'Radar' },
        { key: '9', tab: '仪表盘', editor: 'Gauge' },
        { key: '10', tab: '折柱图', editor: 'BarAndLine' },
        { key: '11', tab: '排名列表', editor: 'RankList' },
        { key: '12', tab: '趋势', editor: 'Trend' },
      ],
      activeKey: '1',
      barDataSource: [] as any,
      barMultiData: [] as any,
      pieData: [] as any,
      barLineData: [] as any,
      radarData: [] as any,

      // 其他配置
      multiBarOption: {
        title: { text: '多列柱状图', left: 'center' },
      },
      rankList: this.loadData('name', 'total', 2000, 100, '北京朝阳 ', ' 号店'),
    };
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
      const { barDataSource, barMultiData, pieData, barLineData, radarData } = getData;

      this.$nextTick(() => {
        this.barDataSource = barDataSource;
        this.barMultiData = barMultiData;
        this.pieData = pieData;
        this.barLineData = barLineData;
        this.radarData = radarData;
      });
    },
    tabChange(key) {
      // console.log('切换的key:', key);
    },
    loadData(x: any, y: any, max: number, min: number, before = '', after = '月') {
      let data: any = [];
      for (let i = 0; i < 12; i += 1) {
        data.push({
          [x]: `${before}${i + 1}${after}`,
          [y]: Math.floor(Math.random() * max) + min,
        });
      }
      return data;
    },
  },
});
